
<!-- <script src="js/main.js"></script> -->
<meta charset="UTF-8">
<!-- 引入样式 -->
<!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> -->
<link rel="stylesheet" href="./css/element.css">
<link rel="stylesheet" href="./css/main.css">

<!-- 引入组件库 -->
<script type="text/javascript" src="./js/vue.min.js"></script>
<!-- <script src="https://unpkg.com/element-ui/lib/index.js"></script> -->
<script src="./js/element.js"></script>


<div id="app">


</div>

import test from "./context/test.vue"

<script>

var test={
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
}

const NotFound = { template: '<p>Page not found</p>' }
const Home = { template: '<p>home page</p>' }
const About = { template: '<p>about page</p>' }

const routes = {
  '/': Home,
  '/about': About,
  '/test':test
}

new Vue({
  el: '#app',
  data: {
    currentRoute: '/test'
  },
  computed: {
    ViewComponent () {
      console.log(this.currentRoute);
      return routes[this.currentRoute] || NotFound
    }
  },
  render (h) { return h(this.ViewComponent) }
})

</script>